import React, { Component } from 'react'
import {
    Card,
    Button,
    Table,
  } from 'antd'
  import * as moment  from 'moment'
  import ExportJsonExcel from 'js-export-excel'
  import '../table/table.less'
export default class TableData extends Component {
    constructor(props) {
        super();
    }

    // static getDerivedStateFromProps() {

    // }

    // 新建按钮
    handleCreate = () => {
       this.props.handleBtnClick({'type': 'add'});
    }

    // 导出按钮用户导出数据
    exportExcel = ()=> {
    let option = {}
    if (this.props.config.dataSource) {
    // 文件名
      option.fileName = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      option.datas = [
        {
        // 父组件传递的要导出的数据
          sheetData: this.props.config.dataSource,
          // sheet名字
          sheetName: 'sheet',
          //父组件传递过来的要导出的数据的key值是一个数组
          sheetFilter: Object.keys(this.props.config.keys),
          // Excel表格的表头,在父组件中传递的时候注意与key对应
          sheetHeader: this.props.config.columns
        }
      ]
    }
    // 创建一个ExportJsonExcel实例
    const exportExcel = new ExportJsonExcel(option)
   // 将数据保存到Excel并且导出
    exportExcel.saveExcel()
    }

    render() {
        const {title, dataSource, columns, btns, isLoading} = this.props.config
        return (
            <div>
                <Card
                title={title}
                bordered={false}
                extra={
                <div className='btn-group'>
                    {
                        btns.add ? <Button type="primary" onClick={this.handleCreate}>新建</Button> : ''
                    }
                    {
                        btns.export ? <Button type="primary" onClick={this.exportExcel}>导出</Button> : ''
                    }
                </div>
               }
                 >
                 <Table
                    rowKey={record => record.id}
                    dataSource={dataSource}
                    columns={columns}
                    loading={isLoading}
                />
                </Card>
            </div>
        )
    }
}
